<script setup lang="ts">
import rank1 from '@/assets/images/pledgeReward/rank1.png';
import rank2 from '@/assets/images/pledgeReward/rank2.png';
import rank3 from '@/assets/images/pledgeReward/rank3.png';
import { Image as VanImage } from 'vant';
import { h } from 'vue';
import type { Item } from '../types';

withDefaults(defineProps<{ isMy?: boolean; ranking: number; item: Item; rtype: number }>(), {
  isMy: false,
  ranking: 1,
});

function RankTop(props: { rank: number }) {
  let src = '';
  switch (props.rank) {
    case 1:
      src = rank1;
      break;
    case 2:
      src = rank2;
      break;
    case 3:
      src = rank3;
      break;
  }
  return h(VanImage, { width: 12, height: 14, src });
}
</script>
<template>
  <div class="rounded-lg bg-[#F6F7F8] py-3 mb-2 relative overflow-hidden">
    <div class="flex items-center">
      <div class="text-[#A2A1A6] text-base w-[45px] text-center">
        <RankTop v-if="[1, 2, 3].includes(ranking)" :rank="ranking" />
        <span v-else>{{ ranking }}</span>
      </div>
      <van-image
        width="47"
        height="47"
        fit="cover"
        lazy-load
        radius="8px"
        :src="item.headimg + '?x-oss-process=image/resize,m_fixed,h_47,w_47'"
      />
      <div class="pl-2">
        <div class="text-sm mb-1">{{ item.nickname }}</div>
      </div>
      <div class="ml-auto mr-3 text-[#EC2D69] text-sm font-medium" v-if="typeof item.price === 'number'">
        {{ item.price }}
      </div>
      <div v-if="isMy" class="bg-[#EC2D69] px-2 leading-5 rounded-bl-lg absolute right-0 top-0 text-xs text-white">
        我自己
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped></style>
